<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>订单列表</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="/node_modules/LobsterUIFrame/weui/css/weui.css" />
    <link rel="stylesheet" href="/node_modules/LobsterUIFrame/weui/css/weuix.css" />
    <script src="/node_modules/LobsterUIFrame/weui/js/zepto.min.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/zepto.weui.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/swipe.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/macy.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/php.js"></script>
    <script src="/lobstersdk/lobster.js"></script>
    <script src="/jslib/template-web.js"></script>
    <style>
        body {
            background-color: #f5f5f5;
        }

        .weui-navbar {
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            z-index: 99;
        }

        .weui-tab__content {
            border-radius: 10px;
            margin: 5px;
            background-color: white;
        }
    </style>
</head>

<body ontouchstart>
    <div class="weui-tab" id="t1" style="height:auto;">
        <div class="weui-navbar">
            <div class="weui-navbar__item">全部</div>
            <div class="weui-navbar__item">待付款</div>
            <div class="weui-navbar__item">待发货</div>
            <div class="weui-navbar__item">待收货</div>
            <div class="weui-navbar__item">已完成</div>
        </div>
        <div class="weui-tab__panel">
            <div id="s0" class="weui-tab__content">
                <div class="weui-loadmore" id="more0">
                    <i class="weui-loading"></i>
                    <span class="weui-loadmore__tips">正在加载</span>
                </div>
            </div>
            <div id="s1" class="weui-tab__content">
                <div class="weui-loadmore" id="more1">
                    <i class="weui-loading"></i>
                    <span class="weui-loadmore__tips">正在加载</span>
                </div>
            </div>
            <div id="s2" class="weui-tab__content">
                <div class="weui-loadmore" id="more2">
                    <i class="weui-loading"></i>
                    <span class="weui-loadmore__tips">正在加载</span>
                </div>
            </div>
            <div id="s3" class="weui-tab__content">
                <div class="weui-loadmore" id="more3">
                    <i class="weui-loading"></i>
                    <span class="weui-loadmore__tips">正在加载</span>
                </div>
            </div>
            <div id="s4" class="weui-tab__content">
                <div class="weui-loadmore" id="more4">
                    <i class="weui-loading"></i>
                    <span class="weui-loadmore__tips">正在加载</span>
                </div>
            </div>
        </div>
    </div>

</body>

</html>
<script type="text/template" id="orderlisttemp">
    {{each list item}}
    <div class="weui-cell">
        <div class="weui-cell__bd">
            <p>订单号：{{item.OrderNo}}</p>
        </div>
        <div class="weui-cell__ft">{{item.OrderStatustxt}}</div>
    </div>
    <div class="weui-panel__bd">
        <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
            {{each item.SpecImg item2}}
            <div class="weui-media-box__hd">
                <img class="weui-media-box__thumb" src="{{item2}}" alt="">
            </div>
            {{/each}}
            {{if(item.GoodsName.length==1)}}
            <div class="weui-media-box__bd">
                <h4 class="weui-media-box__title">{{item.GoodsNametxt}}</h4>
                <p class="weui-media-box__desc">￥{{item.TotalFee}}</p>
            </div>
            {{/if}}
        </a>
    </div>
    <div style="display: flex;justify-content: flex-end;">
        <div data-orderno="{{item.OrderNo}}" data-item="{{item}}">
            {{if(item.OrderStatus==0)}}
            <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary todetail"></i>查看详情</a>
            <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary bg-orange topay"></i>去支付</a>  
            {{else if(item.OrderStatus==1)}}
            <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary todetail"></i>查看详情</a>
            {{else if(item.OrderStatus==2)}}
            <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary todetail"></i>查看详情</a> 
            <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary togetgoods"></i>确认收货</a>
            {{else if(item.OrderStatus==4)}}
            <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary todetail"></i>查看详情</a>   
            <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary toevaluate"></i>评价</a>
            {{else if(item.OrderStatus>4)}}
            <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary todetail"></i>查看详情</a>   
            {{/if}}
        </div>
    </div>
    {{/each}}
</script>
<script>

    lobsterh5.main({
        data: {
            pagelist: [{
                page: 1,
                limit: 10,
                hasmore: true,
                isloading: false,
            }, {
                page: 1,
                limit: 10,
                hasmore: true,
                isloading: false,
            }, {
                page: 1,
                limit: 10,
                hasmore: true,
                isloading: false,
            }, {
                page: 1,
                limit: 10,
                hasmore: true,
                isloading: false,
            }, {
                page: 1,
                limit: 10,
                hasmore: true,
                isloading: false,
            }],
            tabindex: 0,
            orderStatusDict: [{ "Code": "0", "Name": "待付款", "Pym": "DFK", "Wbm": "TWF", "Szm": "" },
            { "Code": "1", "Name": "待发货", "Pym": "DFH", "Wbm": "TVW", "Szm": "" },
            { "Code": "2", "Name": "待收货", "Pym": "DSH", "Wbm": "TNW", "Szm": "" },
            { "Code": "3", "Name": "待评价", "Pym": "DPJ", "Wbm": "TYW", "Szm": "" },
            { "Code": "4", "Name": "已完成", "Pym": "YWC", "Wbm": "NPD", "Szm": "" },
            { "Code": "5", "Name": "已取消", "Pym": "YQX", "Wbm": "NBI", "Szm": "" },
            { "Code": "6", "Name": "退款中", "Pym": "TKZ", "Wbm": "OFK", "Szm": "" },
            { "Code": "7", "Name": "已退款", "Pym": "YTK", "Wbm": "NOF", "Szm": "" }],
            orderStatus: -1,
            tabindex: 0,
        },
        //初始化页面
        pageload: function () {
            this.data.tabindex = lobsterh5.GetUrlParam("tabindex") || 0;
            this.initevent();
            // this.getorderlist();
        },
        //初始化事件
        initevent: function () {
            var self = this;
            $('#t1').tab({
                defaultIndex: self.data.tabindex,
                activeClass: 'tab-green',
                onToggle: function (index, sss) {
                    self.data.tabindex = index;
                    self.data.orderStatus = index - 1;
                    if (!self.data.pagelist[index].isloading)
                        self.getorderlist();
                }
            })
            $(".weui-tab__content").on("click", ".todetail", function () {
                location.href = "detail.html?orderNo=" + $(this).parent().data("orderno");
            })

            $(".weui-tab__content").on("click", ".togetgoods", function () {
                var item = $(this).parent().data("item");
                $.confirm('提示', '确定收货吗？', function () {
                    $.showLoading("提交中");
                    lobsterh5.GET("/lowcode/APP20200616102057595/shop/?fun=mall.UpdateOrderStatus", {
                        orderNo: item.OrderNo,
                        orderStatus: 4
                    }).then(res => {
                        $.hideLoading();
                        self.data.pagelist[self.data.tabindex].page = 1;
                        self.data.pagelist[self.data.tabindex].hasmore = true;
                        $("#more" + self.data.tabindex).siblings().remove();
                        self.getorderlist();
                    }).catch(res => {
                        $.toast(res.msg, 'forbidden');

                    })
                }, function () {
                    //取消操作
                });
            })
            $(".weui-tab__content").on("click", ".toevaluate", function () {
                var item = $(this).parent().data("item");
                if (item.GoodsId.length > 1) {
                    location.href = "../goods/evaluatelist.html?orderNo=" + item.OrderNo;
                } else {
                    location.href = "../goods/evaluate.html?goods=" + JSON.stringify({
                        OrderNo: item.OrderNo,
                        GoodsId: item.GoodsId[0],
                        SpecImg: item.SpecImg[0],
                        SpecDetailId: item.SpecDetailId[0],
                        GoodsName: item.GoodsName[0],
                        SpecName: item.SpecName[0],
                    });
                }
            })
            $(".weui-tab__content").on("click", ".topay", function () {
                var item = $(this).parent().data("item");
                var price = parseFloat(item.TotalFee) * 100;
                lobsterh5.CALLOUTSERVICE("wallet.wallet.pretransaction", {
                    SubMchId: '20220505085609644323',
                    BusinessOrderNo: item.OrderNo,
                    OrderType: 3,//业务类型 1预约挂号 2自助缴费
                    PayScene: 1,//1 h5 2小程序 3app
                    PayType: 1,//默认1 微信支付
                    Price: price, //单位分
                    Body: '商品购买',//商品描述
                    Memo: "商品购买",//self.data.goods.map(n => n.GoodsName).join(";")//可以不填
                    tradelist: JSON.stringify([{ UserId: localStorage.getItem("userId"), Amount: price, FinancialBalance: 2 }
                        , { UserId: "6117", Amount: price, FinancialBalance: 1 }])
                }).then(res => {
                    $.hideLoading();
                    location = res.payredirecturl;
                }).catch(res => {
                    $.toast(res.msg || res, 'forbidden');
                });
            })
            $(window).scroll(
                self.debounce(
                    function () {
                        let pageHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight);
                        let viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0;
                        let scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
                        if (pageHeight - viewportHeight - scrollHeight < 50) {
                            self.getorderlist();
                        }
                    }), 1000);
        },
        debounce: function (fn, interval) {
            let timer = null; // 定时器
            return function () {
                // 清除上一次的定时器
                clearTimeout(timer);
                // 拿到当前的函数作用域
                let _this = this;
                // 拿到当前函数的参数数组
                let args = Array.prototype.slice.call(arguments, 0);
                // 开启倒计时定时器
                timer = setTimeout(function () {
                    // 通过apply传递当前函数this，以及参数
                    fn.apply(_this, args);
                    // 默认300ms执行
                }, interval || 300)
            }
        },
        getorderlist: function () {
            var self = this;
            var tabindex = self.data.tabindex;
            if (!self.data.pagelist[tabindex].hasmore) return;
            $("#more" + tabindex).show();
            lobsterh5.GET("/lowcode/APP20200616102057595/shop/?fun=mall.getorderlist", {
                orderStatus: self.data.orderStatus,
                page: self.data.pagelist[tabindex].page,
                limit: self.data.pagelist[tabindex].limit,
                userId: localStorage.getItem("userId"),
            }).then(res => {
                res.forEach(a => {
                    a.SpecImg = a.SpecImg.split(',').filter(b => {
                        return (b || "") != "";
                    });
                    a.GoodsName = a.GoodsName.split(',').filter(b => {
                        return (b || "") != "";
                    });
                    if (a.GoodsName.length > 0)
                        a.GoodsNametxt = a.GoodsName[0];
                    a.GoodsId = a.GoodsId.split(',').filter(b => {
                        return (b || "") != "";
                    });
                    a.SpecDetailId = a.SpecDetailId.split(',').filter(b => {
                        return (b || "") != "";
                    });
                    a.SpecName = a.SpecName.split(',').filter(b => {
                        return (b || "") != "";
                    });
                    var filter = self.data.orderStatusDict.filter(c => {
                        return c.Code == a.OrderStatus;
                    })
                    if (filter.length > 0)
                        a.OrderStatustxt = filter[0].Name;
                })
                var html = template("orderlisttemp", { list: res, });
                $("#more" + tabindex).before(html);
                if (res.length < self.data.pagelist[tabindex].limit) {
                    self.data.pagelist[tabindex].hasmore = false;
                    $("#more" + tabindex).text("没有更多了");
                } else {
                    $("#more" + tabindex).hide();
                    self.data.pagelist[tabindex].page++;
                }
                self.data.pagelist[tabindex].isloading = true;
            }).catch(res => {
                $.toast(res.msg, 'forbidden');
            })
        },
    })
</script>